<template>
    <div class="sm-spm-dataDisplay">
        <ul style="font-size:22px">
            <li>
                <h6>工作包</h6>
                <p style="font-size:0.6em;position: absolute;bottom: 35px;right: 5px;"><Strong>部分配套/完全配套/未配套/工作包总数</Strong></p>
                <p class="sm-spm-aheadNum"><span>{{packagedLackCount}}/{{ packagedCount }}/{{ packagedPartCount }}/{{packageCount}}</span></p>
            </li>
            
            <li class="sm-spm-boxli">
                <h6>AO</h6>
                <p style="font-size:0.6em;position: absolute;bottom: 35px;right: 5px;"><Strong>部分配套/完全配套/未配套/AO总数</Strong></p>
                <p class="sm-spm-aheadNum"><span>{{aoedPartCount}}/{{ aoedCount }}/{{ aoUnCount }}/{{aoCount}}</span></p>
            </li>
            <li class="sm-spm-boxli">
                <h6>缺配类型</h6>
                <p style="font-size:0.6em;position: absolute;bottom: 35px;right: 5px;"><Strong>A类缺件/非A类缺件</Strong></p>
                <p class="sm-spm-aheadNum"><span>{{aoCountA}}/{{ aoCountB }}</span></p>
            </li>
        </ul>
    </div>
</template>
<script>
import { smSpmTopShowdata } from "@/utils/api.js"
export default {
    name:"SpmDataDisplay",
    data(){
        return{
            aoedCountA:'',
            aoedCountB:'',
            aoedCountC:'',
            aoCountA:'',
            aoCountB:'',
            aoCountC:'',
            packagedCount:'',
            packagedPartCount:'',
            packagedLackCount:'',
            packageCount:'',
            aoCount:'',
            aoedCount:'',
            aoedPartCount:'',
        }
    },
    mounted(){
        smSpmTopShowdata({

        }).then((res)=>{
            console.log('数据框数据',res)
            this.aoedCountA = res.data.responseBody.aoedCountA
            this.aoedCountB = res.data.responseBody.aoedCountB
            this.aoedCountC = res.data.responseBody.aoedCountC
            this.aoCountA = res.data.responseBody.aoCountA
            this.aoCountB = res.data.responseBody.aoCountB
            this.aoCountC = res.data.responseBody.aoCountC
            this.aoUnCount = res.data.responseBody.aoUnCount;
            this.packagedCount = res.data.responseBody.packagedCount
            this.packagedPartCount = res.data.responseBody.packagedPartCount;
            this.packagedLackCount = res.data.responseBody.packagedLackCount;
            this.packageCount = res.data.responseBody.packageCount
            this.aoCount = res.data.responseBody.aoCount
            this.aoedCount = res.data.responseBody.aoedCount
            this.aoedPartCount = res.data.responseBody.aoedPartCount;
            
        })
    }
}
</script>
<style scoped>
.sm-spm-dataDisplay {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    overflow: hidden;
}
.sm-spm-boxli {
    margin-left: 5px;
}
.sm-spm-dataDisplay ul li {
    position: relative;
   /* width: 120px;*/
   width:calc(100%/4);
    height: 60px;
    padding: 5px;
    margin:10px 20px 10px 0 ;
    float: left;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: inset 0px 0px 20px 0px #cccbcb;
}
.sm-spm-aheadNum {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.sm-spm-aheadNum span {
    color: #3375d7;
}
</style>